<template>

    <div style="width: 100%; height: 100%;">
  
      <div style="display: flex; width: 400px; margin-top: 20px;margin-left: 30px;margin-bottom: 20px;">
  
        <el-input placeholder="请输入要查询的岗位" v-model="positionName"></el-input>
  
        <el-button type="primary" style="margin-left: 20px;" @click="selectlist">查询</el-button>
  
        <el-button type="primary" @click="centerDialogVisible = true">新增</el-button>
  
  
      </div>
  
  
      <el-table :data="tableData" style="width: 100%; margin-left: 30px;">
        <!-- <el-table-column fixed prop="date" label="Date" width="150" /> -->
  
        <el-table-column prop="positionId" label="职位Id" width="120" />
        <el-table-column prop="positionName" label="职位名字" width="120" />
        <el-table-column prop="departmentName" label="所在部门名字" width="120" />
        <el-table-column prop="userCount" label="职位人数" width="120" />
        <el-table-column prop="createTime" label="创建时间" width="120" />
        <el-table-column prop="updateTime" label="更新时间" width="120" />
        <el-table-column fixed="right" label="操作" min-width="120">
  
  
          <template #default="scope">
            <el-button type="primary" @click="openUpdateDialog(scope.row.positionId)">修改</el-button>
  
            <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" icon-color="#626AEF"
              title="Are you sure to delete this?" @confirm="() => deleteButton(scope.row.positionId)">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
  
  
        </el-table-column>
      </el-table>
  
      <div style="display: flex; justify-content: flex-end; margin-top: 16px; margin-right: 150px;">
        <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="CurrentPage"
          :page-sizes="[1, 2, 3, 10, 100]" :page-size="size" background layout="total,sizes,prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
  
  
      <!-- 新增 -->
      <el-dialog v-model="centerDialogVisible" title="新增职位数据" width="500" center>
  
        <el-form>
          <el-form-item>
            <el-input placeholder="请输入新增职位名字" v-model="Name" />
          </el-form-item>
  
          <el-form-item>
            <div style="display: flex;">
              <el-input v-model="departmentId"></el-input>
  
              <el-select v-model="departmentId" clearable placeholder="Select" style="width: 280px">
                <el-option v-for="item in options" :key="item.departmentId" :label="item.departmentName"
                  :value="item.departmentId">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
  
        </el-form>
  
  
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="add">确认</el-button>
          </div>
        </template>
      </el-dialog>
  
  
      <el-dialog v-model="Visible" title="修改职位数据" width="500" center>
  
        <el-form>
          <el-form-item>
            <el-input placeholder="请输入修改职位的名字" v-model="ChangeName" />
          </el-form-item>
        </el-form>
  
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="Visible = false">取消</el-button>
            <el-button type="primary" @click="update">确认</el-button>
          </div>
        </template>
      </el-dialog>
  
    </div>
  
  
  
  </template>
  
  <script setup>
  import { onMounted, ref } from 'vue';
  import { DELETE, GET, POST, PUT } from '../../../api';
import { ElMessage } from 'element-plus';
  
  let tableData = ref([])
  let size = ref(10)
  let CurrentPage = ref(1)
  let total = ref(0)
  
  let positionName = ref("")
  
  async function selectlist() {
    let res = await GET('http://localhost:9999/Position/selectPage', { positionName: positionName.value, size: size.value, page: CurrentPage.value })
    console.log(res)
    tableData.value = res.data.list
    total.value = res.data.total
  }
  
  
  
  //修改当前页
  function currentChange(_page) {
    CurrentPage.value = _page
    selectlist()
  }
  //修改每页大小
  function sizeChange(_size) {
    size.value = _size
    CurrentPage.value = 1
    selectlist()
  }
  
  //删除部门功能
  async function deleteButton(id) {
    console.log(id)
    let res = await DELETE('http://localhost:9999/Position/delete', { positionId: id })
    if (res.data.num != 0) {
      ElMessage.success("删除成功")
      await selectlist()
    }
  }
  
  //新增部门功能
  let centerDialogVisible = ref(false)
  let Name = ref("")
  async function add() {
    let res = await POST('http://localhost:9999/Position/add', {
      positionName: Name.value,
      departmentId:departmentId.value
    })
  
    centerDialogVisible.value = false
    ElMessage.success("新增成功")
    selectlist()
  }
  
  
  //修改职位功能
  let departmentId = ref("")
  
  let positionId = ref("")

  let Visible = ref(false)
  let ChangeName = ref("")
  
  async function openUpdateDialog(id) {
    positionId.value = id
    Visible.value = true
  }
  
  async function update() {
    let res = await PUT('http://localhost:9999/Position/update', {
      positionName: ChangeName.value,
      positionId: positionId.value
    })
    Visible.value = false
    if (res.data != 0) {
      ElMessage.success("修改成功")
      selectlist()
    }
  }
  
  
  let options = ref([])
  async function deupdate() {
    let res = await GET('http://localhost:9999/department/selectall ')
    options.value = res.data
  }
  
  onMounted(async () => {
    await selectlist()
    await deupdate()
  })
  
  </script>
  
  <style></style>